<template>
    <div class="amap-wrapper">
      <el-amap class="amap-box" :vid="'amap-vue'" :zoom='zoom' :center='center'>
        <el-amap-marker vid="component-marker" :position="componentMarker.position" :content-render="componentMarker.contentRender" ></el-amap-marker>
        <el-amap-marker v-for="(marker, index) in markers" :position="marker.position" :events="marker.events" :visible='marker.visible' :draggable="marker.draggable" :vid="index" :key='index'></el-amap-marker>
      </el-amap>
    </div>
</template>
<script>
const exampleComponents = {
  props: ['text'],
  template: `<div>{{text}}</div>`
}
export default {
  name: 'Map',
  data () {
    return {
      slotStyle: {
        padding: '2px 8px',
        background: '#eee',
        color: '#333',
        border: '1px solid #aaa'
      },
      zoom: 15,
      center: [113.965017, 22.570493],
      markers: [
        {
          position: [113.965017, 22.569793],
          events: {
            click: () => {
              alert('click marker')
            },
            dragend: (e) => {
              console.log('---event---: dragend')
              this.markers[0].position = [e.lnglat.lng, e.lnglat.lat]
            }
          },
          visible: true,
          draggable: true,
          template: '<span>1</span>'
        }
      ],
      componentMarker: {
        position: [113.965017, 22.569793],
        contentRender: (h, instance) => h(exampleComponents, {
          style: {
            backgroundColor: '#fff',
            width: '300px',
            height: '60px',
            margin: '-70px -134px',
            'text-align': 'center',
            'line-height': '60px',
            'border-radius': '35px',
            'font-size': '16px',
            'letter-spacing': '5px'
          },
          props: {
            text: '深圳市昆特科技有限公司'
          }
        },
        ['xxxxxxx'])
      }
    }
  }
}
</script>
<style lang="less" scoped>
.amap-wrapper {
  width: 510px;
  height: 270px;
}
</style>
